<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>角色管理页面</title>
    <link href="css/index/index.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" </head> <body>
    <link rel="stylesheet" href="css/loginOut.css">
    <script src="lib/js/jquery-1.12.4.js"></script>
    <script src="js/loginText.js"></script>

    <!-- left 侧边栏 start -->
    <header>
        <div class="header_content">
            您好，<span class="actor"></span>！
            <div class="loginOut">
                退出
                <span class="iconfont icon-tuichu"></span>
            </div>
        </div>
    </header>
    <div class="content">
        <div id="left">
            <div class="menu">菜单栏</div>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                <!-- todo -->


            </div>
        </div>
        <!-- left 侧边栏 end -->
        <div class="right">
            <div class="header">角色管理页面</div>
            <div class="right_content">

                <table class="table table-bordered">
                    <thead>
                        <tr class="info">
                            <td>#</td>
                            <td>角色名称</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>

                        <!-- todo -->
                    </tbody>
                </table>

                <div class="page">
                    <button type="button" class="btn btn-primary addUser"><a href="addActor.html"
                            style="color: #fff; text-decoration: none;">添加角色信息</a></button>
                </div>
            </div>
        </div>
    </div>
    <footer>
    </footer>
    <div class="footer_content1">权限管理系统2020</div>
    </body>

    <!-- 模态框 -->
    <div class="modal fade myHide" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">菜单权限</h4>
                </div>
                <div class="modal-body">

                    <form action="" method="POST" role="form" id="form">
                        <div class="form-group" style="display: none;">
                            <input type="text" name="name" class="inputName">
                        </div>
                        <div class="myForm form-group modalData">
                            <!-- todo -->
                        </div>
                        <button type="submit" class="btn btn-primary">保存</button>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                    </button>
                </div>

            </div>
        </div>
    </div>

    <!-- 左 -->
<script type="text/template" id="myFormData">

    <%for(var i = 0; i < data.length; i++) {%>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <div class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion"
                    href="#<%=i+1%>" aria-expanded="false" aria-controls="<%=i+1%>">
                    <span><%=data[i].father%></span>
                </div>
            </h4>
        </div>
        <div id="<%=i+1%>" class="panel-collapse collapse" role="tabpanel"
            aria-labelledby="headingTwo">
            <div class="panel-body" style="color: #337AB7">
                <%for(var j = 0; j < data[i].sun.length; j++) {%>
                    <div style="margin-top: 20px"><a href="<%=data[i].sun[j].url%>"><%=data[i].sun[j].name%></a></div>
                <%}%>
            </div>
        </div>
    </div>
<% } %>

</script>


    <!-- 模态框数据渲染 -->
    <script type="text/template" id="modalDatas">

        <%for( i = 0; i < data.length; i++) {%>
            <div style="margin: 20px"><%=data[i].father%>:</div>
            <div style="margin-left: 40px">
              <%for( j = 0; j < data[i].sun.length; j++) {%>
                    <input type="checkbox" id="inlineCheckbox1" value="<%=data[i].sun[j].name%>" name="<%=data[i].father%>"><%=data[i].sun[j].name%>
               <%}%>
              </div>
           <%}%>
    </script>

    <!-- 表格渲染 -->
    <script type="text/template" id="myTable">
        <% for(let i = 0; i < data.length; i++) { %>
        <tr class="info">
            <td><%=i+1%></td>
            <td><%=data[i]%></td>
            <td>
                <!-- <a href="#" data-actor="<%=data[i]%>" class="rootManage">权限管理</a>-->
                <button type="button" data-name="<%=data[i]%>" class="btn btn-primary rootManage" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">权限管理</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-success">
                    <a href="editActor.html?name=<%=data[i]%>"
                        style="color: #fff">编辑
                    </a>
                </button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" class="btn btn-danger deleteActor" data-name="<%=data[i]%>">
                    删除
                </button>
                </td>
        </tr>

        <% } %>
    </script>
    <script>
        $(function () {
            // 获取当前用户信息
            var actor = JSON.parse(localStorage.getItem('userMessage')).actor
            console.log(actor)

            // 左边菜单栏渲染
            getActorCategory(function (res) {
                console.log(res)
                $('.panel-group').html(template('myFormData', {
                    data: res
                }))
            }, actor)


            // 角色渲染
            function render() {
                getAllActors(function (res) {
                    console.log(1)
                    console.log(res)
                    console.log(1)

                    $('tbody').html(template('myTable', {
                        data: res
                    }))
                })
            }
            render()

            // 删除按钮的绑定事件
            $('tbody').on('click', '.btn-danger', function (e) {
                var name = this.getAttribute('data-name')
                console.log(name)
                if (confirm("确认删除？")) {
                    $.ajax({
                        url: '/pages/actor/deleteActor',
                        type: 'post',
                        data: JSON.stringify({
                            name
                        }),
                        dataType: 'json',
                        contentType: 'application/json;charset=UTF-8',
                        success:  (res) => {
                            console.log(res)
                            if (res.success) {
                                render()
                            } else if (res.error) {
                                window.alert(res.error)
                                $(this).parent().parent().remove()

                            }
                        }
                    })

                } else {
                    return
                }
            })


            // 权限管理按钮点击事件
            $('tbody').on('click', '.rootManage', function (e) {
                // 获取按钮绑定的name属性
                // console.log($('.rootManage'))
                var name = this.getAttribute('data-name')
                console.log(name)
                $('.inputName')[0].value = name


                // 获取父类子类菜单
                getAllCategoryAndSunCategory(function (res) {
                    console.log(res)
                    // 模态框渲染
                    $('.modalData').html(template('modalDatas', {
                        data: res
                    }))
                })

                // 表单提交事件绑定
                $("#form").submit(function (e) {
                    e.preventDefault()
                    // 序列化表单数据
                    var formData = $("#form").serializeArray()
                    // console.log(formData)
                    var data = {}
                    data.name = name
                    data.menus = ''
                    for (var i = 1; i < formData.length; i++) {
                        if (formData[i].name === formData[i - 1].name) {
                            data.menus += "|";
                            data.menus += formData[i].value;
                        } else {
                            data.menus += "&";
                            data.menus += formData[i].name + ":" + formData[i].value;
                        }
                    }
                    var str = data.menus.replace('&', '')
                    data.menus = str
                    console.log(data)
                    if (!data.menus) {
                        window.alert('请勾选权限!')
                        return
                    }
                    $.ajax({
                        url: '/pages/actor/rootManage',
                        type: 'post',
                        data: data,
                        dataType: 'json',
                        contentType: 'application/json;charset=UTF-8',
                        success: function (res) {
                            console.log(res)
                            if (res.success) {
                                // 让模态框隐藏
                                $('#exampleModal').modal('hide')
                            } else if (res.error) {
                                window.alert(res.error)
                            }
                        }
                    })
                })
            })









        })


        // 请求后台所有角色函数封装
        function getAllActors(callback) {
            $.ajax({
                url: '/pages/getActors',
                type: 'get',
                data: '',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    callback && callback(res)
                }
            })
        }


        // 获取所有父菜单和子菜单。。。父菜单带子菜单函数封装
        function getAllCategoryAndSunCategory(callback) {
            $.ajax({
                url: '/pages/category/getAllCategoryAndSunCategory',
                type: 'post',
                data: '',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    callback && callback(res)
                }
            })
        }

        // 根据角色获取左边菜单栏函数封装
        function getActorCategory(callback, actor) {
            $.ajax({
                url: '/pages/category/getAllCategoryAndSunCategoryByActor',
                type: 'post',
                data: JSON.stringify({
                    actor
                }),
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                success: function (res) {
                    callback && callback(res)
                }

            })
        }
    </script>
    <script src="lib/js/template-native.js"></script>
    <script src="lib/js/bootstrap.js"></script>
    <script src="lib/js/bootstrap-paginator.js"></script>
    <script src="js/common.js"></script>

    <script src="lib/js/mock.js"></script>


    <script src="mock/actorRootManage.js"></script>
    <script src="mock/getAllActors.js"></script>
    <script src="mock/getAllCategory.js"></script>
    <script src="mock/deleteActor.js"></script>
    <script src="mock/getCategoryByActor.js"></script>

</html>